@import '../stakingConfig';

.component {
  @extend %regularText;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0 0 20px 20px;

  &.isLoading {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;

    .loadingBlockWrapper {
      p {
        margin-bottom: 20px;
        opacity: 0.5;
      }
    }
  }

  .listTitle {
    width: initial;
  }

  h2 {
    color: var(--theme-staking-stake-pools-title-color);
    display: flex;
    font-family: var(--font-regular);
    justify-content: space-between;
    line-height: 1.38;
    margin: 20px 0 10px;
    padding: 0 20px;
  }

  .leftContent {
    > span:first-child {
      opacity: 0.5;
    }
  }

  .smashSettings {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    line-height: 23px;
    > span:first-child {
      color: var(--theme-staking-stake-pools-title-color);
      display: inline-block;
      max-width: 570px;
      opacity: 0.5;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: top;
      white-space: nowrap;
    }
    &:hover {
      svg {
        opacity: 1;
      }
    }
  }

  .smashSettingsIcon svg {
    margin-left: 4px;
    opacity: 0.6;
    width: 10px;
    g {
      fill: var(--theme-staking-stake-pools-title-color);
    }
  }

  .tinySpinner {
    display: inline-block;
    margin: -6px 0 0 6px;
    vertical-align: middle;
    svg {
      animation: rotating-spinner 1.2s linear infinite;
      height: 10px;
      width: 10px;
      circle {
        stroke: var(--theme-staking-stake-pools-title-color);
      }
    }
  }

  @keyframes rotating-spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
